<template>
  <div class="DanalySis">
    <div class="content">
      <div class="aWeekDrugUsing" id="children" style="width: 350px"></div>
      <div class="stockNotEnough" id="children" style="width: 350px"></div>
      <div class="aWeekPatients" id="children" style="width: 450px"></div>
      <div class="statistic-card" id="children">
        <el-statistic :value="Month.Num">
          <template #title>
            <div style="display: inline-flex; align-items: center">
              本月就诊人数
              <el-tooltip
                effect="dark"
                content="这个数量指的是本月就诊结束已生成病历的患者人数"
                placement="top"
              >
                <el-icon style="margin-left: 4px" :size="12">
                  <Warning />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </el-statistic>
        <div class="statistic-footer">
          <div class="footer-item">
            <span style="color: #ffffff">相比上个月</span>
            <span class="green">
              {{ (((Month.Num - Month.Lnum) / Month.Lnum) * 100).toFixed(2) }}%
              <el-icon>
                <CaretTop />
              </el-icon>
            </span>
          </div>
        </div>
      </div>
      <div class="twoMonthInCome" id="children" style="width: 350px"></div>
      <div class="InComeType" id="children" style="width: 500px"></div>
      <div class="oneMonthDisease" id="children" style="width: 650px"></div>
    </div>
  </div>

  <a-float-button
    shape="circle"
    :style="{
      top: '85px',
    }"
    @click="Back()"
  >
    <template #icon>
      <svg
        t="1711692143119"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9800"
        width="16"
        height="16"
      >
        <path
          d="M423.466667 141.568a42.666667 42.666667 0 0 1-2.048 60.288l-142.506667 132.992h336.512a280.576 280.576 0 1 1 0 561.152H170.666667a42.666667 42.666667 0 1 1 0-85.333333h444.757333a195.242667 195.242667 0 1 0 0-390.485334H278.912l142.506667 133.034667a42.666667 42.666667 0 1 1-58.24 62.378667L141.568 408.746667a42.666667 42.666667 0 0 1 0-62.421334L363.178667 139.52a42.666667 42.666667 0 0 1 60.288 2.090667z"
          fill="#2c2c2c"
          p-id="9801"
        ></path>
      </svg>
    </template>
  </a-float-button>

  <a-float-button
    shape="circle"
    :style="{
      top: '145px',
    }"
    @click="Refresh()"
  >
    <template #icon>
      <svg
        t="1711084999528"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="8887"
        width="16"
        height="16"
      >
        <path
          d="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z"
          fill="#000000"
          p-id="8888"
        ></path>
      </svg>
    </template>
  </a-float-button>
</template>

<script>
import {
  getUsing,
  stockNotEnough,
  queryOneMonthDisease,
  queryAweekPatients,
  monCompareMon,
  queryTwoMonthInCome,
  queryInComeType,
} from "@/api/dataAnalysis";
import * as echarts from "echarts";
export default {
  data() {
    return {
      queryParams: {},
      Month: {},
      aWeekDrugUsing: {
        title: {
          text: "一周内使用量最多的药品",
          left: "center",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {},
        xAxis: {
          data: [],
          axisLabel: {
            formatter: function (value) {
              if (value.length > 2) {
                return `${value.slice(0, 2)}..`;
              }
            },
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#ffffff",
          },
        },
        series: {
          type: "line",
          data: [],
          itemStyle: {
            normal: {
              color: "#ffffff",
            },
          },
        },
      },
      stockNotEnough: {
        title: {
          text: "药品储存量不足1000",
          left: "center",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        series: [
          {
            type: "pie",
            radius: "50%",
            data: [],
          },
        ],
      },
      oneMonthDisease: {
        title: {
          text: "近一个月诊断结果最多的疾病",
          left: "center",
          textStyle: {
            color: "#ffffff",
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "value",
          boundaryGap: [0, "30%"],
          axisLabel: {
            color: "#ffffff",
          },
        },
        series: [
          {
            type: "line",
            smooth: 0.6,
            symbol: "none",
            lineStyle: {
              color: "#5470C6",
              width: 5,
            },
            areaStyle: {},
            data: [],
          },
        ],
      },
      aWeekPatients: {
        title: {
          text: "每日就诊人数",
          left: "center",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {},
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#ffffff",
          },
        },
        series: [
          {
            data: [],
            type: "bar",
          },
        ],
      },
      twoMonthInCome: {
        title: {
          text: "本月与上月收入对比",
          left: "center",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "7%",
          left: "center",
          textStyle: {
            color: "#ffffff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            data: [],
          },
        ],
      },
      InComeType: {
        title: {
          text: "药品收入占比",
          textStyle: {
            color: "#ffffff",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
          axisLabel: {
            color: "#ffffff",
          },
        },
        yAxis: {
          type: "category",
          data: [],
          axisLabel: {
            color: "#ffffff",
          },
        },
        series: [
          {
            type: "bar",
            data: [],
          },
        ],
      },
    };
  },
  created() {
    this.queryDrugUsingAndInComing();
    this.queryStockNotEnough();
    this.getOneMonthDiseaseData();
    this.getAweekPatients();
    this.queryMonCompareMon();
    this.getTwoMonthInCome();
    this.getInComeType();
  },
  methods: {
    //一周内使用量最多的药品
    queryDrugUsingAndInComing() {
      getUsing(this.queryParams).then((res) => {
        res.data.data.forEach((item) => {
          this.aWeekDrugUsing.series.data.push(item.usingNum);
          this.aWeekDrugUsing.xAxis.data.push(item.name);
        });
        const domMap = document.querySelector(".DanalySis .aWeekDrugUsing");
        //这行是确保切换页面回来以后图表再次被渲染
        domMap.removeAttribute("_echarts_instance_");
        let myChart = echarts.init(domMap);
        myChart.setOption(this.aWeekDrugUsing);
      });
    },
    //药品库存量数据分析
    queryStockNotEnough() {
      stockNotEnough().then((res) => {
        res.data.data.forEach((item) => {
          var obj = {};
          obj.value = item.stock;
          obj.name = item.dname;
          this.stockNotEnough.series[0].data.push(obj);
        });
        const domMap = document.querySelector(".DanalySis .stockNotEnough");
        //这行是确保切换页面回来以后图表再次被渲染
        domMap.removeAttribute("_echarts_instance_");
        let myChart = echarts.init(domMap);
        myChart.setOption(this.stockNotEnough);
      });
    },
    getOneMonthDiseaseData() {
      queryOneMonthDisease().then((res) => {
        res.data.data.forEach((item) => {
          var obj = [];
          obj.push(item.name);
          obj.push(item.usingNum);
          this.oneMonthDisease.series[0].data.push(obj);
        });

        const domMap = document.querySelector(".DanalySis .oneMonthDisease");
        //这行是确保切换页面回来以后图表再次被渲染
        domMap.removeAttribute("_echarts_instance_");
        let myChart = echarts.init(domMap);
        myChart.setOption(this.oneMonthDisease);
      });
    },
    getAweekPatients() {
      queryAweekPatients().then((res) => {
        res.data.data.forEach((item) => {
          this.aWeekPatients.series[0].data.push(item.addingNum);

          this.aWeekPatients.xAxis.data.push(item.addingTime.slice(5, 11));
        });
        const domMap = document.querySelector(".DanalySis .aWeekPatients");
        //这行是确保切换页面回来以后图表再次被渲染
        domMap.removeAttribute("_echarts_instance_");
        let myChart = echarts.init(domMap);
        myChart.setOption(this.aWeekPatients);
      });
    },
    queryMonCompareMon() {
      monCompareMon().then((res) => {
        this.Month.Num = res.data.data[0].usingNum;
        this.Month.Lnum = res.data.data[0].addingNum;
      });
    },
    getTwoMonthInCome() {
      queryTwoMonthInCome().then((res) => {
        var obj1 = {}; //上个月
        obj1.name = res.data.data[1].idcard + "月";
        obj1.value = res.data.data[1].addingNum;
        var obj2 = {}; //当前月
        obj2.name = res.data.data[0].idcard + "月";
        obj2.value = res.data.data[0].usingNum;
        this.twoMonthInCome.series[0].data.push(obj1);
        this.twoMonthInCome.series[0].data.push(obj2);
        const domMap = document.querySelector(".DanalySis .twoMonthInCome");
        //这行是确保切换页面回来以后图表再次被渲染
        domMap.removeAttribute("_echarts_instance_");
        let myChart = echarts.init(domMap);
        myChart.setOption(this.twoMonthInCome);
      });
    },
    getInComeType() {
      queryInComeType().then((res) => {
        res.data.data.forEach((item) => {
          this.InComeType.yAxis.data.push(item.name);
          this.InComeType.series[0].data.push(item.inCome);
        });
        const domMap = document.querySelector(".DanalySis .InComeType");
        //这行是确保切换页面回来以后图表再次被渲染
        domMap.removeAttribute("_echarts_instance_");
        let myChart = echarts.init(domMap);
        myChart.setOption(this.InComeType);
      });
    },
    Refresh() {
      location.reload();
      this.Loading();
    },
    Back() {
      this.$router.go(-1);
    },
    Loading() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        background: "rgba(255, 255, 255, 0.8)",
      });
      setTimeout(() => {
        loading.close();
      }, 2000);
    },
  },
};
</script>
<style scoped>
.DanalySis {
  width: 100%;
  min-width: 1900px;
  min-height: 1080px;
  height: 100vh;
  background: url(./../../assets/images/back1.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.content {
  width: 1900px;
  margin: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  padding-top: 70px;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

:global(h2#card-usage ~ .example .example-showcase) {
  /* color: #ffffff !important; */
  background-color: var(--el-fill-color) !important;
}

.el-statistic {
  --el-statistic-content-font-size: 28px;
}

::v-deep .el-statistic__head {
  margin: 90px 0 20px 0;
  font-size: 28px;
  color: #ffffff;
}

::v-deep .el-statistic__content {
  font-size: 35px;
  color: #ffffff;
}

.statistic-card {
  text-align: center;
  width: 350px;
  padding: 20px;
  border-radius: 4px;
}
#children {
  height: 350px;
  margin: 50px 50px 0 50px;
}
.statistic-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  font-size: 20px;
  margin-top: 16px;
}

.statistic-footer .footer-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.statistic-footer .footer-item span:last-child {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
}

.green {
  font-weight: 600;
  color: var(--el-color-success);
}

.red {
  font-weight: 600;
  color: var(--el-color-error);
}
</style>
